<template>
  <div>
    <table-title tableTitle="学生列表"></table-title>
    <div class="tab_wrap">
      <el-table border stripe :data="stuList">
        <el-table-column label="用户名" prop="userName"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="注册日期">
          <template slot-scope="scope">
            <div>
              {{ new Date(scope.row.createAt).toLocaleString() }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否冻结">
          <template slot-scope="scope">
            <div>
              {{ scope.row.isstate ? '已冻结' : '可用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-link
                @click="Freeze(scope.row.tokenId)"
                :type="scope.row.isstate ? 'success' : 'danger'"
                >{{ scope.row.isstate ? '解冻' : '冻结' }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev,pager,next"
        :total="count"
        :page-size="3"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import tableTitle from '../../components/tableTitle.vue'
import { _FreezeStudent } from '../../api/student'
export default {
  components: { tableTitle },
  props: {
    stuList: {
      //父子传参的 学员列表数据
      type: Array,
      default () {
        return []
      }
    },
    count: {
      //分页总条数
      type: Number,
      default: 0
    }
  },
  methods: {
    pageChange (val) {
      console.log(val)
      //分页改变
      this.$parent.pageStart = val //改变父组件中的页码
      this.$parent.getStudent() //重新获取列表
    },
    async Freeze (tokenId) {
      //冻结解冻学员接口
      var res = await _FreezeStudent(tokenId)
      console.log(res)
      if (res.success) {
        this.$message.success('操作成功')
        this.$parent.getStudent() //重新获取列表
      }
    }
  }
}
</script>
<style lang="less" scoped>
.tab_wrap {
  width: 80%;
  margin: 0 auto;
}
</style>
